@import "~@angular/material/theming";
@import "../../variables.scss";

.hidden {
  position: absolute;
  visibility: hidden;
  display: none;
  pointer-events: none;
}

.torrent-table-container {
    display: flex;
    flex-direction: column;
    overflow: scroll;
}


mat-spinner {
    align-self: center;
    margin: 5% auto 10px auto;
}

/** Progress bar components */
.custom_progress_bar {
    width: 100%;

    .p-progressbar.p-progressbar-determinate {
      .p-progressbar-label {
        .white_label {
          color: white
        }
        font-weight: 600;
      }
      // #9DAFB8
      .dark-theme .p-progressbar-value{
        background: #9DAFB8;
      }
      .p-progressbar-value {
        background: #03A9F4;
      }
    }
}

.custom_progress_bar.white_label {
  .p-progressbar.p-progressbar-determinate {
    .p-progressbar-label {
      color: white
    }
  }
}

.dark-theme .custom_progress_bar {
  .p-progressbar.p-progressbar-determinate {
    .p-progressbar-value {
      background: #7abf7d;
    }
  }
}

#loading_p {
    width: 50px;
    align-self: center;
    margin: 10px auto 10px auto;
}

/** Sizes of each column */
.table-col   {
  width: max-content;

  &.table-col-Name {
    overflow-wrap: break-word;

    word-wrap: break-word;
    word-break: break-word;

    width: 450px;
  }

  /** MUST HAVE SIZES FOR EACH COLUMN!! */

  &.table-col-select     { width: 50px; }
  &.table-col-Actions    { width: 140px; }
  &.table-col-Size       { width: 85px; }
  &.table-col-Progress   { width: 200px; }
  &.table-col-Status     { width: 140px; }
  &.table-col-Up-Speed   { width: 100px; }
  &.table-col-Down-Speed { width: 120px; }
  &.table-col-ETA        { width: 125px; }
  &.table-col-Ratio      { width: 75px; }
  &.table-col-Uploaded   { width: 85px; }
  &.table-col-Added-On   { width: 150px; }
  &.table-col-Completed-On { width: 150px; }
  &.table-col-Last-Activity { width: 150px; }
}

i.pi {
  font-size: 15px;
}

.torrent-table-status {
  color: white;

  &.primary {
    background: mat-color($my-app-primary)
  }

  &.warning {
    background: mat-color($my-app-accent)
  }

  &.danger {
    background: mat-color($my-app-warn)
  }

  &.info {
    background: $my-app-default;
    color: $table-black-color;
  }
}

// For dark mode!
.dark-theme {
  .torrent-table-status {
    &.primary {
      background: mat-color($dark-primary);
      color: $table-black-color;
    }

    &.warning {
      background: mat-color($dark-accent);
      color: $table-black-color;
    }

    &.danger {
      background: mat-color($dark-warn);
    }

    &.info {
      background: $dark-default;
      color: white;
    }
  }
}


/** Torrent table header and row styles **/

.p-datatable .p-datatable-thead > tr > th {
  background: white;
  color: rgba(0,0,0,.54);
  border-color: #E0E0E0;

  font-size: 12px;
}

.p-datatable .p-datatable-tbody > tr.torrent-table-row {
  cursor: pointer;

  background: white;
  color: $table-black-color;

  font-size: 13.5px;

  transition: background-color 0.15s ease;

  &:hover {
    background: $row-hover-light;
  }

  &.selected {
    background: $row-hover-light;
  }
}

.p-datatable .p-datatable-tbody > tr > td {
  border-color: #E0E0E0;
}

// Hacky fix :(
.p-datatable-scrollable-header-box {
  background: white;
}

.dark-theme {
  .p-datatable .p-datatable-thead > tr > th {
    background: $table-surface-2;
    color: hsla(0,0%,100%,.7);
    border-color: $table-surface-1;

    &:hover {
      background: $row-hover-dark;
      color: white;
    }
  }

  .p-datatable .p-datatable-tbody > tr.torrent-table-row {
    background: $table-surface-2;
    color: white;

    &:hover {
      background: $row-hover-dark;
    }

    &.selected {
      background: $row-hover-dark;
    }
  }

  .p-datatable .p-datatable-tbody > tr > td {
    border-color: $table-surface-1;
  }

  // Hacky fix
  .p-datatable-scrollable-header-box {
    background: $table-surface-2;
  }
}
